<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 - 天幕</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f6fa;
      min-height: 100vh;
    }

    .header {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      color: white;
      padding: 0.7rem 2rem;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }

    .welcome {
      font-size: 1.2rem;
    }

    .username {
      font-weight: bold;
      color: #ffd700;
    }

    .logout-btn {
      padding: 0.5rem 1.2rem;
      border: 2px solid white;
      background: transparent;
      color: white;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.9rem;
    }

    .logout-btn:hover {
      background: white;
      color: #6a11cb;
    }

    .main-content {
      padding: 0 2rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
      transition: all 0.3s ease;
    }

    .section-title {
      font-size: 1.8rem;
      color: #2c3e50;
      margin: 0.5rem 0 1.5rem;
      text-align: center;
      font-weight: 500;
      position: relative;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      border-radius: 3px;
    }

    .card-container {
      display: grid;
      grid-template-columns: repeat(4, minmax(280px, 1fr));
      gap: 2rem;
      padding: 1.5rem;
      margin: 0 -2rem;
    }

    .card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      min-width: 280px;
      height: fit-content;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-bottom: 1px solid #eee;
    }

    .card-content {
      padding: 1.5rem;
    }

    .card-title {
      font-size: 1.3rem;
      color: #2c3e50;
      margin-bottom: 0.8rem;
      font-weight: bold;
    }

    .card-description {
      color: #666;
      line-height: 1.6;
      font-size: 0.95rem;
    }

    .chat-room-card {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      color: white;
    }

    .chat-room-card .card-title,
    .chat-room-card .card-description {
      color: white;
    }

    .status-badge {
      display: inline-block;
      padding: 0.3rem 0.8rem;
      border-radius: 15px;
      font-size: 0.8rem;
      margin-top: 1rem;
      background: rgba(255,255,255,0.2);
    }

    @media (max-width: 768px) {
      .header {
        padding: 1rem;
      }

      .main-content {
        padding: 5rem 1rem 1rem;
      }

      .section-title {
        font-size: 1.5rem;
      }

      .card-container {
        gap: 1.5rem;
        padding: 1rem;
        margin: 0;
      }
    }

    /* 天气卡片样式 */
    .weather-card {
      background: linear-gradient(135deg, #00b4db, #0083b0);
      color: white;
    }

    .weather-info {
      padding: 1rem 0;
    }

    .current-weather {
      text-align: center;
      margin-bottom: 1rem;
    }

    .temp-big {
      font-size: 3rem;
      font-weight: bold;
    }

    .weather-desc {
      font-size: 1.2rem;
      margin: 0.5rem 0;
    }

    .weather-details {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin: 1rem 0;
      padding: 1rem 0;
      border-top: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .detail-item {
      text-align: center;
    }

    .detail-item span {
      display: block;
    }

    .forecast-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .forecast-item {
      text-align: center;
      font-size: 0.9rem;
    }

    /* 日历卡片样式 */
    .calendar-card {
      background: white;
    }

    .calendar {
      padding: 1rem 0;
    }

    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .calendar-btn {
      padding: 0.5rem 1rem;
      border: none;
      background: #f0f0f0;
      cursor: pointer;
      border-radius: 4px;
    }

    .weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0.5rem;
    }

    .calendar-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
    }

    .calendar-day.today {
      background: #e3f2fd;
      border-radius: 50%;
    }

    .calendar-day.holiday::after {
      content: '';
      position: absolute;
      bottom: 2px;
      width: 4px;
      height: 4px;
      background: #f44336;
      border-radius: 50%;
    }

    .calendar-day.solar-term::before {
      content: '';
      position: absolute;
      top: 2px;
      width: 4px;
      height: 4px;
      background: #4caf50;
      border-radius: 50%;
    }

    .calendar-footer {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid #eee;
    }

    .legend {
      display: flex;
      gap: 1rem;
      justify-content: center;
      font-size: 0.9rem;
    }

    .holiday-dot, .solar-term-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
    }

    .holiday-dot {
      background: #f44336;
    }

    .solar-term-dot {
      background: #4caf50;
    }

    .time-bar {
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 0.5rem;
      position: relative;
      z-index: 99;
      backdrop-filter: blur(10px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 0;
      transition: all 0.3s ease;
    }

    .time-zone {
      padding: 0.5rem;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      transition: all 0.3s ease;
    }

    .time-zone:hover {
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    .zone-title {
      font-size: 0.8rem;
      color: #00bcd4;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      padding-left: 15px;
    }

    .zone-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 8px;
      height: 8px;
      background: #00bcd4;
      border-radius: 50%;
      transform: translateY(-50%);
    }

    .time-items {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .time-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      padding-right: 35px;
      background: rgba(0,0,0,0.3);
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }

    .time-item:hover {
      background: rgba(0,0,0,0.5);
    }

    .country {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.8);
    }

    .time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.1rem;
      font-weight: bold;
      color: #4caf50;
      text-shadow: 0 0 10px rgba(76,175,80,0.3);
    }

    .pulse {
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background: #4caf50;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(76,175,80,0.4);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(76,175,80,0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(76,175,80,0);
      }
    }

    /* 为不同时区设置不同的主题色 */
    .asia .zone-title { color: #00bcd4; }
    .asia .zone-title::before { background: #00bcd4; }
    .asia .time { color: #00bcd4; text-shadow: 0 0 10px rgba(0,188,212,0.3); }
    .asia .pulse { background: #00bcd4; }

    .europe .zone-title { color: #9c27b0; }
    .europe .zone-title::before { background: #9c27b0; }
    .europe .time { color: #9c27b0; text-shadow: 0 0 10px rgba(156,39,176,0.3); }
    .europe .pulse { background: #9c27b0; }

    .america .zone-title { color: #f44336; }
    .america .zone-title::before { background: #f44336; }
    .america .time { color: #f44336; text-shadow: 0 0 10px rgba(244,67,54,0.3); }
    .america .pulse { background: #f44336; }

    .oceania .zone-title { color: #ff9800; }
    .oceania .zone-title::before { background: #ff9800; }
    .oceania .time { color: #ff9800; text-shadow: 0 0 10px rgba(255,152,0,0.3); }
    .oceania .pulse { background: #ff9800; }

    @media (max-width: 768px) {
      .time-bar {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
      }

      .time-zone {
        padding: 0.8rem;
      }

      .time-item {
        padding: 0.6rem;
      }

      .time {
        font-size: 1rem;
      }
    }

    /* 添加内容包装器 */
    .content-wrapper {
      position: relative;
      z-index: 1;
      background: #f5f6fa;
      margin-top: 50px;
    }

    /* 添加收缩按钮样式 */
    .time-toggle {
      position: fixed;
      top: 50px;
      right: 20px;
      z-index: 1000;
    }

    .time-toggle button {
      background: rgba(0, 0, 0, 0.8);
      border: none;
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .time-toggle button:hover {
      background: rgba(0, 0, 0, 0.9);
    }

    .toggle-icon {
      width: 20px;
      height: 20px;
      fill: currentColor;
      transition: transform 0.3s ease;
    }

    /* 添加时间条收缩动画 */
    .time-bar {
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform-origin: top;
    }

    .time-bar.collapsed {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }

    .time-toggle button.collapsed .toggle-icon {
      transform: rotate(180deg);
    }

    /* 调整主内容区域的过渡效果 */
    .main-content {
      transition: padding-top 0.3s ease;
    }

    .main-content.time-collapsed {
      padding-top: 4rem;
    }

    @media (max-width: 768px) {
      .time-toggle {
        right: 10px;
      }
      
      .time-toggle button {
        width: 28px;
        height: 28px;
      }
      
      .toggle-icon {
        width: 16px;
        height: 16px;
      }
    }

    /* 修改折叠动画 */
    .time-bar.collapsed + .main-content .section-title {
      margin-top: 1rem;
    }

    /* 修改卡片容器样式 */
    .card-container {
      padding-top: 1rem;
    }

    /* 计算器卡片样式 */
    .calculator-card {
      background: white;
      cursor: default;
    }

    .calculator-card:hover {
      transform: none;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* 修改卡片基础样式，只对非计算器卡片应用悬浮效果 */
    .card:not(.calculator-card) {
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:not(.calculator-card):hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .calculator {
      margin-top: 1rem;
    }

    .calc-display {
      margin-bottom: 1rem;
    }

    .calc-display input {
      width: 100%;
      padding: 1rem;
      font-size: 1.5rem;
      text-align: right;
      border: 1px solid #eee;
      border-radius: 8px;
      background: #f8f9fa;
    }

    .calc-buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }

    .calc-buttons button {
      padding: 1rem;
      font-size: 1.2rem;
      border: none;
      border-radius: 8px;
      background: #f8f9fa;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .calc-buttons button:hover {
      background: #e9ecef;
    }

    .calc-buttons button.operator {
      background: #6a11cb;
      color: white;
    }

    .calc-buttons button.operator:hover {
      background: #5a0fb0;
    }

    .calc-buttons button.span-2 {
      grid-column: span 2;
    }

    .calc-history {
      margin-top: 1.5rem;
      border-top: 1px solid #eee;
      padding-top: 1rem;
    }

    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .clear-history {
      padding: 0.3rem 0.8rem;
      border: none;
      border-radius: 4px;
      background: #f8f9fa;
      cursor: pointer;
      font-size: 0.9rem;
    }

    .clear-history:hover {
      background: #e9ecef;
    }

    .history-content {
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
    }

    .history-item {
      padding: 0.5rem;
      border-bottom: 1px solid #eee;
    }

    .history-item:last-child {
      border-bottom: none;
    }

    .history-expression {
      color: #666;
    }

    .history-result {
      color: #6a11cb;
      font-weight: bold;
    }

    /* 响应式布局调整 */
    @media (max-width: 1600px) {
      .card-container {
        grid-template-columns: repeat(3, minmax(280px, 1fr));
      }
    }

    @media (max-width: 1200px) {
      .card-container {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .card-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
        margin: 0;
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="welcome">欢迎, <span class="username" id="username">用户</span></div>
    <button class="logout-btn" onclick="logout()">退出登录</button>
  </header>

  <div class="content-wrapper">
    <div class="time-toggle">
      <button id="timeToggleBtn" onclick="toggleTimeBar()">
        <svg viewBox="0 0 24 24" class="toggle-icon">
          <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
        </svg>
      </button>
    </div>

    <div class="time-bar" id="timeBar">
      <div class="time-zone asia">
        <h3 class="zone-title">亚洲时区</h3>
        <div class="time-items">
          <div class="time-item">
            <span class="country">中国(北京)</span>
            <span class="time" id="china-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
          <div class="time-item">
            <span class="country">日本(东京)</span>
            <span class="time" id="japan-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
          <div class="time-item">
            <span class="country">阿联酋(迪拜)</span>
            <span class="time" id="uae-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
        </div>
      </div>

      <div class="time-zone europe">
        <h3 class="zone-title">欧洲时区</h3>
        <div class="time-items">
          <div class="time-item">
            <span class="country">英国(伦敦)</span>
            <span class="time" id="uk-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
        </div>
      </div>

      <div class="time-zone america">
        <h3 class="zone-title">美洲时区</h3>
        <div class="time-items">
          <div class="time-item">
            <span class="country">美国(纽约)</span>
            <span class="time" id="us-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
        </div>
      </div>

      <div class="time-zone oceania">
        <h3 class="zone-title">大洋洲时区</h3>
        <div class="time-items">
          <div class="time-item">
            <span class="country">澳洲(悉尼)</span>
            <span class="time" id="aus-time">--:--:--</span>
            <div class="pulse"></div>
          </div>
        </div>
      </div>
    </div>

    <main class="main-content">
      <h1 class="section-title">天幕系统</h1>
      <div class="card-container">
        <!-- 天气预报卡片 -->
        <div class="card weather-card">
          <div class="card-content">
            <div class="card-title">天气预报</div>
            <div id="weather-info" class="weather-info">
              <div class="current-weather">
                <div class="temp-big">--℃</div>
                <div class="weather-desc">获取中...</div>
                <div class="location">定位中...</div>
              </div>
              <div class="weather-details">
                <div class="detail-item">
                  <span>湿度</span>
                  <span class="humidity">--%</span>
                </div>
                <div class="detail-item">
                  <span>风速</span>
                  <span class="wind">--m/s</span>
                </div>
                <div class="detail-item">
                  <span>气压</span>
                  <span class="pressure">--hPa</span>
                </div>
              </div>
              <div class="forecast-list">
                <!-- 未来天气预报将通过 JS 动态添加 -->
              </div>
            </div>
          </div>
        </div>

        <!-- 日历卡片 -->
        <div class="card calendar-card">
          <div class="card-content">
            <div class="card-title">日历</div>
            <div id="calendar" class="calendar">
              <div class="calendar-header">
                <button class="calendar-btn" onclick="prevMonth()">&lt;</button>
                <div class="current-month">2024年1月</div>
                <button class="calendar-btn" onclick="nextMonth()">&gt;</button>
              </div>
              <div class="weekdays">
                <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>
              </div>
              <div class="calendar-grid">
                <!-- 日期将通过 JS 动态添加 -->
              </div>
              <div class="calendar-footer">
                <div class="legend">
                  <span class="holiday-dot"></span> 节假日
                  <span class="solar-term-dot"></span> 节气
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 聊天室卡片 -->
        <div class="card chat-room-card" onclick="location.href='/chat'">
          <img src="https://picsum.photos/512/512
          " alt="聊天室" class="card-image">
          <div class="card-content">
            <div class="card-title">实时聊天室</div>
            <div class="card-description">加密通道，阅后即焚</div>
            <div class="status-badge">在线</div>
          </div>
        </div>

        <!-- 计算器卡片 -->
        <div class="card calculator-card">
          <div class="card-content">
            <div class="card-title">计算器</div>
            <div class="calculator">
              <div class="calc-display">
                <input type="text" id="calcInput" readonly value="0">
              </div>
              <div class="calc-buttons">
                <button onclick="clearCalc()">C</button>
                <button onclick="appendCalc('(')">(</button>
                <button onclick="appendCalc(')')">)</button>
                <button onclick="appendCalc('/')" class="operator">÷</button>
                <button onclick="appendCalc('7')">7</button>
                <button onclick="appendCalc('8')">8</button>
                <button onclick="appendCalc('9')">9</button>
                <button onclick="appendCalc('*')" class="operator">×</button>
                <button onclick="appendCalc('4')">4</button>
                <button onclick="appendCalc('5')">5</button>
                <button onclick="appendCalc('6')">6</button>
                <button onclick="appendCalc('-')" class="operator">-</button>
                <button onclick="appendCalc('1')">1</button>
                <button onclick="appendCalc('2')">2</button>
                <button onclick="appendCalc('3')">3</button>
                <button onclick="appendCalc('+')" class="operator">+</button>
                <button onclick="appendCalc('0')" class="span-2">0</button>
                <button onclick="appendCalc('.')">.</button>
                <button onclick="calculate()" class="operator">=</button>
              </div>
            </div>
            <div class="calc-history">
              <div class="history-header">
                <span>计算历史</span>
                <button onclick="clearHistory()" class="clear-history">清空</button>
              </div>
              <div class="history-content" id="calcHistory"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    // 检查登录状态
    document.addEventListener('DOMContentLoaded', () => {
      const username = localStorage.getItem('username');
      if (!username) {
        location.href = '/login';
      } else {
        document.getElementById('username').textContent = username;
      }
      
      getWeather();
      renderCalendar();
      
      // 更新时间
      updateTimes();
      setInterval(updateTimes, 1000);  // 每秒更新一次时间
      
      // 每30分钟更新一次天气
      setInterval(getWeather, 30 * 60 * 1000);
    });

    // 退出登录
    function logout() {
      if (confirm('确定要退出登录吗？')) {
        localStorage.removeItem('username');
        location.href = '/login';
      }
    }

    // 天气预报功能
    async function getWeather() {
      try {
        // 和风天气 API
        const key = '056288068d714acdaf6c8d2aedcd029f'; // 你的和风天气 API key
        const location = '101280601'; // 深圳的城市 ID
        
        // 获取实时天气
        const nowResponse = await fetch(
          `https://devapi.qweather.com/v7/weather/now?location=${location}&key=${key}`
        );
        const nowData = await nowResponse.json();
        
        // 获取天气预报
        const forecastResponse = await fetch(
          `https://devapi.qweather.com/v7/weather/7d?location=${location}&key=${key}`
        );
        const forecastData = await forecastResponse.json();
        
        updateWeatherUI(nowData, forecastData);
      } catch (error) {
        console.error('获取天气信息失败:', error);
      }
    }

    function updateWeatherUI(nowData, forecastData) {
      const weatherInfo = document.getElementById('weather-info');
      
      if (nowData.code === '200') {
        const current = nowData.now;
        
        // 更新当前天气
        weatherInfo.querySelector('.temp-big').textContent = `${current.temp}℃`;
        weatherInfo.querySelector('.weather-desc').textContent = current.text;
        weatherInfo.querySelector('.location').textContent = '深圳市';
        
        // 更新详细信息
        weatherInfo.querySelector('.humidity').textContent = `${current.humidity}%`;
        weatherInfo.querySelector('.wind').textContent = `${current.windSpeed}km/h`;
        weatherInfo.querySelector('.pressure').textContent = `${current.pressure}hPa`;
      }
      
      if (forecastData.code === '200') {
        // 更新预报
        const forecastList = weatherInfo.querySelector('.forecast-list');
        forecastList.innerHTML = '';
        
        // 获取未来5天的天气
        forecastData.daily.slice(0, 5).forEach(forecast => {
          const date = new Date(forecast.fxDate);
          const dayName = new Intl.DateTimeFormat('zh-CN', { weekday: 'short' }).format(date);
          
          forecastList.innerHTML += `
            <div class="forecast-item">
              <div>${dayName}</div>
              <div>${forecast.tempMax}/${forecast.tempMin}℃</div>
              <div>${forecast.textDay}</div>
            </div>
          `;
        });
      }
    }

    // 日历功能
    let currentDate = new Date();

    // 农历节气数据
    const solarTerms = {
      '2025-01-05': '小寒',
      '2025-01-20': '大寒',
      '2025-02-03': '立春',
      '2025-02-18': '雨水',
      '2025-03-05': '惊蛰',
      '2025-03-20': '春分',
      '2025-04-04': '清明',
      '2025-04-20': '谷雨',
      '2025-05-05': '立夏',
      '2025-05-21': '小满',
      '2025-06-05': '芒种',
      '2025-06-21': '夏至',
      '2025-07-07': '小暑',
      '2025-07-22': '大暑',
      '2025-08-07': '立秋',
      '2025-08-23': '处暑',
      '2025-09-07': '白露',
      '2025-09-23': '秋分',
      '2025-10-08': '寒露',
      '2025-10-23': '霜降',
      '2025-11-07': '立冬',
      '2025-11-22': '小雪',
      '2025-12-07': '大雪',
      '2025-12-21': '冬至'
    };

    // 节假日数据
    const holidays = {
      '2025-01-01': '元旦',
      '2025-01-28': '除夕',
      '2025-01-29': '春节',
      '2025-01-30': '春节',
      '2025-01-31': '春节',
      '2025-02-01': '春节',
      '2025-02-02': '春节',
      '2025-02-03': '春节',
      '2025-02-04': '春节',
      '2025-02-14': '情人节',
      '2025-03-08': '妇女节',
      '2025-04-04': '清明节',
      '2025-04-05': '清明节',
      '2025-04-06': '清明节',
      '2025-05-01': '劳动节',
      '2025-05-02': '劳动节',
      '2025-05-03': '劳动节',
      '2025-05-04': '青年节',
      '2025-05-05': '劳动节',
      '2025-06-01': '儿童节',
      '2025-06-02': '端午节',
      '2025-08-01': '建军节',
      '2025-09-04': '中秋节',
      '2025-09-05': '中秋节',
      '2025-09-06': '中秋节',
      '2025-09-10': '教师节',
      '2025-10-01': '国庆节',
      '2025-10-02': '国庆节',
      '2025-10-03': '国庆节',
      '2025-10-04': '国庆节',
      '2025-10-05': '国庆节',
      '2025-10-06': '国庆节',
      '2025-10-07': '国庆节',
      '2025-12-24': '平安夜',
      '2025-12-25': '圣诞节'
    };

    function renderCalendar() {
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth();
      
      document.querySelector('.current-month').textContent = 
        `${year}年${month + 1}月`;
      
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const startDay = firstDay.getDay();
      const totalDays = lastDay.getDate();
      
      const calendarGrid = document.querySelector('.calendar-grid');
      calendarGrid.innerHTML = '';
      
      // 添加空白天数
      for (let i = 0; i < startDay; i++) {
        calendarGrid.innerHTML += '<div></div>';
      }
      
      // 添加日期
      for (let day = 1; day <= totalDays; day++) {
        const date = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
        const isHoliday = holidays[date];
        const isSolarTerm = solarTerms[date];
        
        const className = `calendar-day${isToday ? ' today' : ''}${isHoliday ? ' holiday' : ''}${isSolarTerm ? ' solar-term' : ''}`;
        
        calendarGrid.innerHTML += `
          <div class="${className}" title="${isHoliday || isSolarTerm || ''}">${day}</div>
        `;
      }
    }

    function prevMonth() {
      currentDate.setMonth(currentDate.getMonth() - 1);
      renderCalendar();
    }

    function nextMonth() {
      currentDate.setMonth(currentDate.getMonth() + 1);
      renderCalendar();
    }

    // 添加时间更新函数
    function updateTimes() {
      const now = new Date();
      const options = { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit', 
        hour12: false 
      };
      
      // 自定义格式化时间函数
      function formatTime(timeString) {
        return timeString.replace(/:/g, ' : ');  // 在冒号两边添加空格
      }
      
      // 中国时间
      document.getElementById('china-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'Asia/Shanghai' }));
      
      // 英国时间
      document.getElementById('uk-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'Europe/London' }));
      
      // 美国纽约时间
      document.getElementById('us-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'America/New_York' }));
      
      // 日本时间
      document.getElementById('japan-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'Asia/Tokyo' }));
      
      // 澳洲悉尼时间
      document.getElementById('aus-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'Australia/Sydney' }));
      
      // 阿联酋迪拜时间
      document.getElementById('uae-time').textContent = 
        formatTime(now.toLocaleTimeString('zh-CN', { ...options, timeZone: 'Asia/Dubai' }));
    }

    // 添加时间条收缩功能
    function toggleTimeBar() {
      const timeBar = document.getElementById('timeBar');
      const toggleBtn = document.getElementById('timeToggleBtn');
      const mainContent = document.querySelector('.main-content');
      
      timeBar.classList.toggle('collapsed');
      toggleBtn.classList.toggle('collapsed');
      mainContent.classList.toggle('time-collapsed');
      
      // 保存状态到 localStorage
      localStorage.setItem('timeBarCollapsed', timeBar.classList.contains('collapsed'));
    }

    // 在页面加载时恢复状态
    document.addEventListener('DOMContentLoaded', () => {
      const isCollapsed = localStorage.getItem('timeBarCollapsed') === 'true';
      if (isCollapsed) {
        const timeBar = document.getElementById('timeBar');
        const toggleBtn = document.getElementById('timeToggleBtn');
        const mainContent = document.querySelector('.main-content');
        
        timeBar.classList.add('collapsed');
        toggleBtn.classList.add('collapsed');
        mainContent.classList.add('time-collapsed');
      }
      
      // ... 其他现有的 DOMContentLoaded 代码
    });

    // 计算器功能
    let currentCalc = '0';

    function appendCalc(value) {
      if (currentCalc === '0' && !isNaN(value)) {
        currentCalc = value;
      } else {
        currentCalc += value;
      }
      document.getElementById('calcInput').value = currentCalc;
    }

    function clearCalc() {
      currentCalc = '0';
      document.getElementById('calcInput').value = currentCalc;
    }

    function calculate() {
      try {
        const result = eval(currentCalc);
        addToHistory(currentCalc, result);
        currentCalc = String(result);
        document.getElementById('calcInput').value = currentCalc;
      } catch (error) {
        document.getElementById('calcInput').value = 'Error';
        currentCalc = '0';
      }
    }

    function addToHistory(expression, result) {
      const history = document.getElementById('calcHistory');
      const item = document.createElement('div');
      item.className = 'history-item';
      item.innerHTML = `
        <div class="history-expression">${expression}</div>
        <div class="history-result">= ${result}</div>
      `;
      history.insertBefore(item, history.firstChild);
    }

    function clearHistory() {
      document.getElementById('calcHistory').innerHTML = '';
    }
  </script>
</body>
</html>
